import React, {Fragment, useEffect, useState} from 'react';
import { connect } from 'react-redux';
import {Outlet, useNavigate} from 'react-router-dom';
import Sider from './components/sider';
import Content from './components/content';
import Footer from './components/footer';
import { HomeWrapper, MainWrapper } from './style';

function Home(props) {

	const menu = [
		{
			key: 'domain',
			name: '阿里云域名注册',
			children: [
				{
					key: 'domain-register',
					name: '域名注册'
				},
				{
					key: 'domain-beian',
					name: '域名备案'
				},
			]
		},
		{
			key: 'merchant',
			name: '微信商户号注册',
			children: [
				{
					key: 'merchant-register',
					name: '支付注册'
				},
				{
					key: 'merchant-params',
					name: '支付参数'
				},
			]
		},
		{
			key: 'smart',
			name: '微信小程序注册',
			children: [
				{
					key: 'smart-register',
					name: '小程序注册'
				},
				{
					key: 'smart-params',
					name: '小程序参数'
				},
			]
		},
		{
			key: 'aliyun-sms',
			name: '阿里云短信服务注册',
			children: [
				{
					key: 'aliyun-sms-register',
					name: '短信服务注册'
				},
				{
					key: 'aliyun-sms-setting',
					name: '短信服务参数'
				},
			]
		},
		{
			key: 'aliyun-cdn',
			name: '阿里云CDN服务',
			children: [
				{
					key: 'aliyun-cdn-purchase',
					name: 'CDN购买'
				},
				{
					key: 'aliyun-cdn-setting',
					name: 'CDN配置'
				},
			]
		},
		{
			key: 'woolly',
			name: '毛毛虫后台操作',
			children: [
				{
					key: 'woolly-login',
					name: '登录后台'
				},
				{
					key: 'woolly-password',
					name: '修改密码'
				},
				{
					key: 'woolly-setting',
					name: '系统设置'
				},
				{
					key: 'woolly-picture',
					name: '图床功能'
				},
				{
					key: 'woolly-category',
					name: '栏目编辑'
				},
                {
                    key: 'woolly-theme',
                    name: '专题编辑'
                },
				{
					key: 'woolly-banner',
					name: '海报编辑'
				},
				{
					key: 'woolly-product',
					name: '商品编辑'
				},
				{
					key: 'woolly-order',
					name: '订单管理'
				},
				{
					key: 'woolly-coupon',
					name: '优惠功能'
				},
				{
					key: 'woolly-user',
					name: '用户管理'
				},
				{
					key: 'woolly-account',
					name: '账单查询'
				},
			],
		},
	];

	return (
		<Fragment>
			<HomeWrapper>
				<Sider menu={menu}/>
				<MainWrapper>
					<Content>
						<Outlet />
					</Content>
					<Footer />
				</MainWrapper>
			</HomeWrapper>
		</Fragment>);
}

const mapState = (state) => ({

})


const mapDispatch = (dispatch) => {
	return {

	}
}

export default connect(mapState, mapDispatch)(Home);